import React from 'react'
import { Menu } from 'antd';
import {Link} from 'react-router-dom'
// useSelector 获取到存储store里面的信息
import { useSelector } from 'react-redux'
// 判断用户是否登录
import { isAuth } from '../../helper/auth'


function Navigation() {
	const auth = isAuth()
	// 获取当前点击的路由信息
	const router = useSelector(state => state.router)
	// 当用户没有登录时,除了基本导航外,增加登录/注册导航 
	const showAuth = () => {
		return (
			<>
				<Menu.Item key="/login" >
				  <Link to="/login">登录</Link>
        </Menu.Item>
				<Menu.Item key="/register" >
				  <Link to="/register">注册</Link>
        </Menu.Item>
			</>
		)
	} 
	// 当用户登录后, 登录/注册导航该为 Dashboard 导航
	const showDashboard = () => {
		const url = auth.user.role === 1 ? '/admin/dashboard' : '/user/dashboard'
		return (
			<>
				<Menu.Item key={url} >
				  <Link to={url}>Dashboard</Link>
        </Menu.Item>
			</>
		)
	}
	return (
		<>
			<Menu selectedKeys={[router.location.pathname]} mode="horizontal">
        <Menu.Item key="/">
					<Link to="/">首页</Link>
        </Menu.Item>
        <Menu.Item key="/shop" >        
					<Link to="/shop">商城</Link>
        </Menu.Item>
				<Menu.Item key="/cart" >
				  <Link to="/cart">购物车</Link>
        </Menu.Item>
				{auth? showDashboard(): showAuth()}
			</Menu>
		</>
	)
}

export default Navigation
